/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef } from 'react';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getJdkVoiceList, getVoiceUpdateDate } from '@/services/jdk/voice';
import { Button, message } from 'antd';
import { usePageTabsChange } from '@/utils/hooks/pageTabs';
import { useUpdateEffect } from 'ahooks';
import UploadWithCrypto from '@base/components/upload-width-crypto';

interface VoiceType {
  id: string;
  key: string;
  name: string;
  version: string;
  url: string;
}

const JdkVoiceIndex: React.FC = () => {
  const [show] = usePageTabsChange();
  const actionRef = useRef<ActionType>();

  const onSuccess = (response: any) => {
    const { code, msg = '' } = response || {};
    if (code == 0) {
      message.success('上传成功');
      actionRef.current?.reload();
    } else {
      message.error(msg);
    }
  };

  const columns: ProColumns<VoiceType>[] = [
    {
      title: '语音包id',
      dataIndex: 'id',
      align: 'center',
      width: '20%',
    },
    {
      title: '语音包名称',
      dataIndex: 'name',
      align: 'center',
      width: '20%',
    },
    {
      title: '语音包',
      dataIndex: 'url',
      align: 'center',
      width: '50%',
      render: (_, { url }) => {
        return url ? <audio src={url} style={{ height: 30 }} controls /> : '--';
      },
    },
    {
      title: '操作',
      dataIndex: 'key',
      align: 'center',
      width: '10%',
      render: (_, record) => (
        <UploadWithCrypto
          data={{ type: record.key }}
          action={'/jdk/voices/upload'}
          multiple={false}
          accept='.wav'
          showUploadList={false}
          onSuccess={onSuccess}
        >
          <a>上传</a>
        </UploadWithCrypto>
      ),
    },
  ];

  useUpdateEffect(() => {
    if (show) {
      actionRef.current?.reload();
    }
  }, [show]);

  return (
    <ProTable
      rowKey='id'
      actionRef={actionRef}
      request={getJdkVoiceList}
      columns={columns}
      pagination={false}
      search={false}
      scroll={{
        x: 900,
      }}
      options={false}
      toolBarRender={() => [
        <Button
          key='download'
          type='primary'
          style={{ marginRight: 10 }}
          onClick={getVoiceUpdateDate}
        >
          全量更新
        </Button>,
      ]}
    />
  );
};

export default JdkVoiceIndex;
